<template>
  <div>
    <el-dialog title="新增部门" class="noselect"
               v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}"
               :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm ">
        <el-form-item label=" " prop="name" :rules="[{ required: true, message: '部门名称不能为空', trigger: 'blur' }]">
          <el-input placeholder="请输入部门名称" v-model="modelForm.name" size="medium" :maxLength="5">
            <template slot="prepend">
              <el-tooltip placement="top" content="请填写部门名称">
                <el-button tabIndex="-1">部门名称</el-button>
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label=" " prop="parentId" :rules="[]">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium">
            <div class="el-input-group__prepend" tabindex="-1">所属区域</div>
            <el-cascader placeholder="请选择所属区域" class="el-cascader-margin w-100p" size="medium"
                         :options="treeData"
                         :disabled="isEdit"
                         :show-all-levels="false" v-model="downCategeryId"
                         change-on-select>
            </el-cascader>
          </div>
          <div class="text-left" style="font-size: 12px;color:#888">（所属区域设置成功之后，将不能进行更改！）</div>
        </el-form-item>
      </el-form>
      <div class="foot-bar-button">
        <el-button type="primary" size="medium"  @click="submitForm('modelForm')">提交</el-button>
        <el-button @click="resetForm('modelForm')"  size="medium">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  //注意路径
  export default {
    props: ['isShow', 'id'],  //参数
    data() {
      return {
        modelForm: {},
        showDialog: false,
        activityId: "",
        isSave: true,
        settlemements: [],
        states: [],
        downCategeryId: [],
        treeData: [],
        isEdit:false
      };
    },
    watch: {
      isShow: function (newValue, oldValue) {
        this.showDialog = newValue;
        if (newValue) {
          if (this.id != '') {
            this.activityId = this.id;
            this.isSave = false;
            this.isEdit=true;
            this.$axios.get("organization/departments/" + this.activityId + "/update").then(data => {
              this.modelForm = data.content.department;
              var tree = data.content.districts;
              this.newLabel(tree);
              this.treeData = tree;
              this.downCategeryId = [];
              if (data.content.department.districtParentId) {
                this.downCategeryId.push(data.content.department.districtParentId + '');
              }

              this.downCategeryId.push(data.content.department.districtId + '');
              console.log(this.downCategeryId);
              // data.content.department.district = data.content.department.district.parentId;
            });
          } else {
            this.isSave = true;
            this.isEdit=false;
            this.$axios.get("organization/departments/create").then(data => {
              this.modelForm = data.content.department;
              this.downCategeryId=[];
              var tree = data.content.districts;
              console.log(tree);
              this.newLabel(tree);
              this.treeData = tree;
              console.log(this.treeData)

            });
          }
        }
      }
    },
    created() {
      window.this = this;
    },
    methods: {
      newLabel(newList) {
        if (newList) {
          for (var i = 0; i < newList.length; i++) {
            newList[i].label = newList[i].name;
            newList[i].value = newList[i].id + "";
            if (newList[i].children.length == 0) {
              newList[i].children = null;
            } else {
              for (var s = 0; s < newList[i].children.length; s++) {
                newList[i].children[s].label = newList[i].children[s].name;
                newList[i].children[s].value = newList[i].children[s].id + "";
                newList[i].children[s].children = null;
              }
            }
          }
        }
      },
      goBack() {
        this.router.go(-1);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.downCategeryId.length<=0){
              this.$message.error("请选择区域");
              return;
            }
            this.modelForm.district = this.downCategeryId[this.downCategeryId.length - 1];
            if (!this.modelForm.district) {
              this.modelForm.district = 0;
            }
            if (this.isSave) {
              this.$axios.post("organization/departments/create", this.modelForm).then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  this.$emit('addSuccess');
                } else {
                  this.$message.error(data.message);
                }

              })

            } else {
              this.modelForm._method = "PUT";
              this.$axios.put("organization/departments/" + this.activityId + "/update", this.modelForm).then(data => {
                if (data.status == 200) {
                  this.$message({
                    message: data.message,
                    type: 'success'
                  });
                  this.$emit('addSuccess');
                } else {
                  this.$message.error(data.message);
                }
              })
            }
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$emit('close');
        this.showDialog = false;
      },
      handleClose(done) {
        this.$emit('close');
        done();
      },
      isNum(item, key) {
        var r = /^\+?[1-9][0-9]*$/;
        if (!r.test(item[key])) {
          item[key] = "0.00"
        } else {
          item[key] = item[key]
        }
      },
      isDouble(item, key) {
        var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
        if (!isNum.test(item[key])) {
          item[key] = "0.00"
        } else {
          item[key] = item[key]
        }
      }
    }
  }
</script>
<style scoped>
  .el-input-group--append .el-input__inner, .el-input-group__prepend {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
</style>
